import React from 'react';
import * as CONST from 'common/const';
import css from './index.less';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import PageContentRender from 'components/pageContentRender';
import { observer } from 'mobx-react';

@observer
export default class PageThumb extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
    maxWidth: PropTypes.number,
    className: PropTypes.string,
  };

  static defaultProps = {
    maxWidth: 180,
  };

  renderPageBg() {
    const { mod } = this.props;
    const props = {
      className: css.pageBg,
      style: mod.style,
    };
    return (
      <div {...props} />
    );
  }

  render() {
    const { mod, className, maxWidth } = this.props;
    const scale = maxWidth / CONST.PAGE_WIDTH;
    const props = {
      className: classnames(css.pageThumb, className),
      style: {
        width: maxWidth,
        height: Math.floor(scale * CONST.PAGE_HEIGHT),
      },
    };

    const innerProps = {
      className: css.inner,
      style: {
        transform: `scale(${scale})`,
        backgroundColor: mod.backgroundColor,
      }
    };
    return (
      <div {...props}>
        <div {...innerProps}>
          {this.renderPageBg()}
          <PageContentRender mod={mod} isThumb={true} />
        </div>
      </div>
    );
  }
}
